<template>
    <div>
        <nav aria-label="Page navigation  ">
            <ul class="pagination pagination-sm justify-content-end">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous" @click="changePage(0, -1)">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="page-item" v-if="hasLeft">
                    <a class="page-link" href="#">...</a>
                </li>
                <li class="page-item" v-for="pageIndex in pageArray" :key="pageIndex">
                    <a class="page-link" :class="{ pageactive: currentPageNo == pageIndex }" href="#"
                        @click="changePage(pageIndex, 0)">{{ pageIndex }}</a>
                </li>
                <li class="page-item" v-if="hasRight">
                    <a class="page-link" href="#">...</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next" @click="changePage(0, 1)">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
module.exports = {
    props: {
        pageSize: { type: Number, default: 0, required: true },
        dataCount: { type: Number, default: 0, required: true }
    },
    data: function () {
        return {
            currentPageNo: 1,
            pageCountNo: 0,
            rightSize: 2,//当前页左边显示几个页码
            leftSize: 2,//当前页右边显示几个页码
            hasRight: false,
            hasLeft: false
        }
    },
    computed: {
        pageArray: function () {
            //根据当前页始终保持显示5个页码， 显示当前页码前两个后两个
            let pageArr = [];
            const windowSize = this.rightSize + this.leftSize + 1;
            if (this.pageCountNo <= windowSize) {
                for (let i = 0; i < this.pageCountNo; i++) {
                    pageArr[i] = i + 1;
                }
            } else {
                if (this.currentPageNo + this.rightSize >= this.pageCountNo) {
                    pageArr[0] = this.pageCountNo - windowSize + 1;
                    this.hasRight = false;
                    this.hasLeft = true;
                }
                else if (this.currentPageNo - this.leftSize <= 0) {
                    pageArr[0] = 1;
                    this.hasRight = true;
                    this.hasLeft = false;
                } else {
                    pageArr[0] = this.currentPageNo - this.leftSize;
                    this.hasRight = true;
                    this.hasLeft = true;
                }
                for (let i = 1; i < windowSize; i++) {
                    pageArr[i] = pageArr[0] + i;
                }
            }
            return pageArr
        }
    },
    watch: {
        dataCount(newVal) {
            this.pageCountNo = parseInt((newVal + this.pageSize - 1) / this.pageSize);
        }
    },

    methods: {
        changePage(pageIndex, offIndex) {

            if (offIndex != 0) {
                this.currentPageNo = this.currentPageNo + offIndex;
            } else {
                this.currentPageNo = pageIndex;
            }
            if (this.currentPageNo <= 0) {
                this.currentPageNo = 1;
            }
            if (this.currentPageNo > this.pageCountNo) {
                this.currentPageNo = this.pageCountNo;
            }
            this.$emit('pagechange', this.currentPageNo, this.pageSize);
        }

    }
}


</script>

<style>
.pageactive {
    color: red;
}
</style>